<template>
    <div class="equipment-acceptance-table">
        <div class="page-container">
            <div class="header">
                <router-link class="back-link" to="/main/xingzheng/gudingzichan">
                    <el-button icon="el-icon-arrow-left">返回</el-button>
                </router-link>
                <span>
                    <el-button type="primary" icon="el-icon-check" @click="saveData">保存</el-button>
                    <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button>
                </span>
            </div>
            <h2>深圳市艾美思普科技有限公司 <br> 设备验收单</h2>
            <table border="1">
                <tbody>
                    <tr>
                        <td>项目名称</td>
                        <td colspan="3"><input v-model="formData.projectName" type="text" /></td>
                    </tr>
                    <tr>
                        <td>设备名称</td>
                        <td>{{ formData.equipmentName }}</td>
                        <td>设备型号</td>
                        <td>{{ formData.equipmentModel }}</td>
                    </tr>
                    <tr>
                        <td>安装地点</td>
                        <td><input v-model="formData.installLocation" type="text" /></td>
                        <td>安装时间</td>
                        <td><input v-model="formData.installTime" type="text" /></td>
                    </tr>
                    <tr>
                        <td>接收人</td>
                        <td><input v-model="formData.receiver" type="text" /></td>
                        <td>联系电话</td>
                        <td><input v-model="formData.contactPhone" type="text" /></td>
                    </tr>
                    <tr>
                        <td colspan="4">验收情况</td>
                    </tr>
                    <tr>
                        <td rowspan="5">请接收人根据 <br>设备安装情况选择:</td>
                        <td style="text-align: left;">设备开电是否正常?</td>
                        <td colspan="2">
                            <input type="radio" v-model="formData.powerOnStatus" value="1" />是
                            <input type="radio" v-model="formData.powerOnStatus" value="2" />否
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">设备安装是否正常运行?</td>
                        <td colspan="2">
                            <input type="radio" v-model="formData.installRunStatus" value="1" />是
                            <input type="radio" v-model="formData.installRunStatus" value="2" />否
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">是否同意设备通过现场验收?</td>
                        <td colspan="2">
                            <input type="radio" v-model="formData.acceptanceStatus" value="1" />是
                            <input type="radio" v-model="formData.acceptanceStatus" value="2" />否
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">产能</td>
                        <td colspan="2">{{ formData.productivity }}</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">直通率</td>
                        <td colspan="2">{{ formData.firstPassRate }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">设备接收方 接收人签字:<input v-model="formData.receiverSignature" type="text" /><br>
                            日期：<input v-model="formData.receiverDate" type="text" /></td>
                        <td colspan="2">设备安装方 安装负责人签字:<input v-model="formData.installerSignature" type="text" /><br>
                            日期：<input v-model="formData.installerDate" type="text" /></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                projectName: '',
                equipmentName: '换向器组入机',
                equipmentModel: 'R370',
                installLocation: '',
                installTime: '',
                receiver: '',
                contactPhone: '',
                powerOnStatus: '',
                installRunStatus: '',
                acceptanceStatus: '',
                productivity: '1500/小时',
                firstPassRate: '99%',
                receiverSignature: '',
                installerSignature: '',
                receiverDate: '',
                installerDate: ''
            }
        };
    },
    methods: {
        printForm() {
            window.print()
        },

        saveData() {
            // 这里模拟向后端发送数据保存，实际需替换为真实接口
            const apiUrl = 'https://example.com/api/saveEquipmentAcceptance'; // 替换为真实接口地址
            this.$axios
                .post(apiUrl, this.formData)
                .then(response => {
                    console.log('保存成功', response.data);
                    alert('数据保存成功');
                })
                .catch(error => {
                    console.error('保存失败', error);
                    alert('数据保存失败，请检查');
                });
        }
    },
    created() {
        // 如果需要从后端获取初始数据，可在这里调用接口
    }
};
</script>

<style lang="scss" scoped>
.equipment-acceptance-table {
    font-family: '宋体', sans-serif;
    height: 100vh;
}

.page-container {
    width: 1200px;
    margin: 0 auto;
    background-color: #FFF;
    padding: 20px;
    min-height: calc(100vh - 40px);

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .back-link {
            margin-top: 10px;
            text-decoration: none;
            color: #409EFF;
            font-size: 14px;
            margin-right: 20px;
            transition: all 0.3s;
        }

        .back-link i {
            margin-right: 5px;
        }

        .back-link :hover {
            opacity: 0.8;
        }
    }
}

table {
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
    line-height: 25px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

input {
    border: none;
    background-color: transparent;
}
input[type="radio"]{
    height: 13px;
}
@media print {

    /*@page规则被用来设置打印页面的方向为横向*/
    // @page {
    //     size: landscape;
    // }
    .equipment-acceptance-table {
        margin: 0 !important;

        .page-container {
            margin: 0px !important;
            width: 800px;
        }
    }


    .header {
        display: none !important;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
    }

    input {
        border: none !important;
        background-color: transparent !important;
        text-align: center;
    }

    textarea {
        border: 0px !important;
    }
}
</style>